<template>
	<view class="input">
		<case-card 
			:step-index="currentCaseStepId"
			:test-case="currentCase"
			:editable="true" 
			:empty-data-text="placholder"
			class="full-width"
			@click.native="handleOpenPicker"
			@input="handleSetpChange($event, currentCase)"></case-card>
		<view v-if="isShowClearButton" class="clear-button" @click="handleClear">
			<uni-icons type="clear" size="25" color="#c0c4cc"></uni-icons>
		</view>
		<uni-popup ref="popup" background-color="#fff" type="bottom" @maskClick="handleClosePicker">
			<uni-nav-bar v-if="loaded" :title="$t('case.please-select-case')" :border="false" right-icon="closeempty" @clickRight="handleClosePicker"></uni-nav-bar>
			<view class="case-list" v-if="caseList.length>0">
				<uni-list>
					<uni-list-item v-for="c in caseList" :key="c.caseId">
						<template v-slot:body>
							<view :class="[caseCardStyle(c)]">
								<case-card :ref="'caseCard_'+c.caseId" :test-case="c" :editable="caseEditable(c)" :step-index="caseEditable(c)?currentCaseStepId:0" class="full-width" @click="handleCaseSelect(c)" @input="handleCaseSetpSelect($event, c)"></case-card>
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
			<view v-else class="col full-width flex-center">
				<image class="empty-data-icon" :src="require('@/static/images/common/empty.svg')" mode="widthFix"></image>
				<text>{{ $t('empty-data') }}</text>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {listCase} from "@/api/system/case";
	import CaseCard from '@/components/case/case-card/index.vue'
	
	// 没有测试
	const NOT_TEST_KEY = 'case.not-tested';
	
	export default {
		name: 'CasePicker',
		components: {CaseCard},
		model: {
			prop: 'caseId',
			event: 'input'
		},
		data() {
		    return {
				popoverVisible:false,
				currentCase: null,
				caseList: [],
				// 当前选择的用例步骤ID
				currentCaseStepId: 0,
				// 是否显示清除按钮
				isClearButtonVisible: false,
		    }
		},
		props: {
			caseId: {
				type: Number,
				default: 0
			},
			moduleId: {
				type: Number,
				default: 0
			},
			caseStepId: {
				type: Number,
				default: 0
			},
			clearable: {
			    type: Boolean,
			    default: true
			},
		},
		watch: {
		    moduleId: function (n,o) {
		      if(n && n!=o) {
		        this.search(n);
		      }
		    },
			caseStepId: function(n,o) {
				this.currentCaseStepId = n;
			}
		},
		computed: {
			/** 是否加载完成  */
			loaded() {
				return this.$i18n.locale?true:false;
			},
			/** 测试用例显示样式  */
			caseCardStyle: function() {
				return function(testCase) {
					return (this.currentCase && this.currentCase.caseId === testCase.caseId)?'case-acion':'';
				}
			},
			/** 是否显示清除按钮  */
			isShowClearButton() {
				return !!(this.currentCase && this.clearable);
			},
			placholder() {
				return this.$i18n.t('case.please-select-case');
			},
			/** 指定用例是否可编辑  */
			caseEditable: function() {
				return function(testCase) {
					return this.currentCase && testCase.caseId===this.currentCase.caseId;
				}
			}
		},
		methods: {
			/** 处理关闭弹框 */
			handleClosePicker() {
				this.$refs.popup.close();
				this.$emit('close')
			},
			/** 处理打开弹框 */
			handleOpenPicker(e) {
				this.$refs.popup.open();
				this.$emit('open');
				this.$forceUpdate();
			},
			/** 处理清除 */
			handleClear(e) {
				this.resetCase();
				this.currentCase = null;
			},
			/** 刷新用例列表 */
			refresh(moduleId) {
			  this.moduleId = moduleId;
			  this.search(this.moduleId);
			},
			/** 重置 */
			reset() {
				this.handleClear();
				this.caseList=[];
			},
			/** 刷新选中的用例 */
			refreshCaseId() {
			  for(let i=0;i<this.caseList.length;i++){
				let c=this.caseList[i];
				if(this.caseId==c.caseId) {
				  this.setCaseId(c);
				  return;
				}
			  }
			  // 如果新获取的用例没有之前选择的，就设置空用例
			  this.setCaseId(null);
			},
			/** 查询用例列表 */
			search(moduleId) {
			  this.reset();
			  if(!moduleId){
				return;
			  }
			  let query = {
				pageSize: 9999,
				pageNum: 1,
				params: {
				  modulePid: moduleId
				}
			  }
			  listCase(query).then(res=>{
				this.caseList = res.rows;
				this.refreshCaseId();
			  })
			},
			/** 重设用例数据 */
			resetCase() {
				const prevCaseId = this.currentCase?this.currentCase.caseId:null;
				if(prevCaseId) {
					const caseCard = this.getComponent(prevCaseId);
					caseCard.reset();
				}
				return prevCaseId;
			},
			/** 设置当前用例 */
			setCaseId(val) {
				const prevCaseId = this.resetCase();
				this.currentCase = val;
				if(!val || prevCaseId!==val.caseId) {
					this.currentCaseStepId = 0;
					if(val) {
					    this.$emit('input',val.caseId, this.currentCaseStepId);
					} else {
					    this.$emit('input',null, null);
					}
			    }
			},
			/** 显示或隐藏清除按钮 */
			showClearButtonHandle(visible) {
			  if(this.clearable==false) return;
			  if(visible && this.currentCase && this.currentCase.caseId) {
				this.isClearButtonVisible = true;
			  } else {
				this.isClearButtonVisible = false;
			  }
			},
			/** 选择用例处理操作 */
			handleCaseSelect(c) {
			  this.setCaseId(c);
			  this.handleClosePicker();
			},
			/** 选择用例选项处理操作 */
			handleCaseSetpSelect(caseStepId, testCase) {
				this.handleCaseSelect(testCase);
				this.handleSetpChange(caseStepId, testCase);
			},
			/** 点击已选用例选项处理操作 */
			handleSetpChange(caseStepId, testCase) {
				this.currentCaseStepId=caseStepId;
				this.$emit('input', this.currentCase.caseId, caseStepId);
			},
			/** 根据用例ID获取组件 */
			getComponent(caseId) {
			  // 处理跨平台差异（H5返回数组，小程序返回组件实例）
			  const ref = this.$refs[`caseCard_${caseId}`];
			  return Array.isArray(ref) ? ref[0] : ref;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.case-list {
		max-height: 80vh;
		overflow-y: auto;
	}
	.case-acion {
		width: 100%;
		padding: 20rpx;
		border: 1px solid #b3d8ff;
		background: #ecf5ff;
		border-radius: 20rpx;
	}
	.clear-button {
		height: 100%;
		display: inline-flex;
		justify-content: center;
		align-items: center;
	}
	.empty-data-icon {
		width: 30%;
	}
</style>